<template>
  <view :class="emptyClass">
    <!-- 空状态图标 -->
    <view class="empty-icon">
      <slot name="icon">
        <BaseIcon
          :name="iconName"
          :size="iconSize"
          :color="iconColor"
        />
      </slot>
    </view>

    <!-- 空状态图片 -->
    <image
      v-if="image"
      :src="image"
      class="empty-image"
      :mode="imageMode"
    />

    <!-- 空状态标题 -->
    <text v-if="title" class="empty-title">{{ title }}</text>

    <!-- 空状态描述 -->
    <text v-if="description" class="empty-description">{{ description }}</text>

    <!-- 操作按钮 -->
    <view v-if="$slots.action" class="empty-action">
      <slot name="action"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BaseIcon from './BaseIcon.vue'

interface Props {
  // 空状态类型
  type?: 'default' | 'search' | 'network' | 'error' | 'loading'
  // 自定义图标名称
  iconName?: string
  // 图标尺寸
  iconSize?: number | 'small' | 'medium' | 'large'
  // 图标颜色
  iconColor?: string
  // 空状态图片
  image?: string
  // 图片裁剪模式
  imageMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix'
  // 标题
  title?: string
  // 描述文字
  description?: string
  // 尺寸
  size?: 'small' | 'medium' | 'large'
  // 是否显示背景
  background?: boolean
  // 自定义类名
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  iconName: '',
  iconSize: 'large',
  iconColor: '',
  image: '',
  imageMode: 'aspectFit',
  title: '',
  description: '',
  size: 'medium',
  background: false,
  customClass: '',
})

// 类型对应的默认配置
const typeConfig = computed(() => {
  const configs = {
    default: {
      iconName: 'i-carbon-document-blank',
      title: '暂无数据',
      description: '当前没有内容可显示',
    },
    search: {
      iconName: 'i-carbon-search',
      title: '无搜索结果',
      description: '没有找到相关内容，请尝试其他关键词',
    },
    network: {
      iconName: 'i-carbon-wifi-off',
      title: '网络异常',
      description: '网络连接失败，请检查网络设置',
    },
    error: {
      iconName: 'i-carbon-warning',
      title: '出错了',
      description: '发生了未知错误，请稍后重试',
    },
    loading: {
      iconName: 'i-carbon-loading',
      title: '加载中',
      description: '正在获取数据，请稍候',
    },
  }

  return configs[props.type] || configs.default
})

// 计算最终图标名称
const finalIconName = computed(() => {
  return props.iconName || typeConfig.value.iconName
})

// 计算最终标题
const finalTitle = computed(() => {
  return props.title || typeConfig.value.title
})

// 计算最终描述
const finalDescription = computed(() => {
  return props.description || typeConfig.value.description
})

// 空状态样式
const emptyClass = computed(() => {
  const baseClass = 'flex flex-col items-center justify-center'

  const sizeClasses = {
    small: 'py-md',
    medium: 'py-lg',
    large: 'py-xl',
  }

  const backgroundClass = props.background
    ? 'bg-bg-medium rounded-custom p-lg'
    : ''

  return [
    baseClass,
    sizeClasses[props.size],
    backgroundClass,
    props.customClass,
  ].filter(Boolean).join(' ')
})
</script>

<style scoped>
.empty-icon {
  @apply mb-md opacity-50;
}

.empty-image {
  @apply mb-md w-32 h-32 opacity-70;
}

.empty-title {
  @apply text-lg font-medium text-text-primary mb-sm text-center;
}

.empty-description {
  @apply text-sm text-text-secondary text-center mb-md max-w-xs;
}

.empty-action {
  @apply mt-md;
}
</style>